
<!DOCTYPE HTML>
<html>
<head>
	<title>Global dashboard</title>
	<link href='bootstrap/css/bootstrap.css' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Oxygen|Dancing+Script' rel='stylesheet' type='text/css'>
	<link href='css/nv.d3.css' rel='stylesheet' type='text/css'>
	<link href='css/style.css' rel='stylesheet' type='text/css'>
</head>

<body style="text-align:center">
<div class="row-fluid">
	<div class="btn-group btn-group-vertical span3" data-toggle="buttons-radio" id="KPIChooser"></div>
	<div id="waiting"><img src="https://lh3.googleusercontent.com/-vHrskUPdmvM/T8zu1UE91nI/AAAAAAAAAYs/4dek7fbrHik/s800/spinner.gif"></div>
	<div class="span9" id="mainChart"><svg></svg></div>
</div>
</body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js/d3.v2.js"></script>
<script type="text/javascript" src="js/nv.d3.js"></script>

<script type="text/javascript">
function updateKPIChooser(KPIs){
	for(var i in KPIs){
		$("#KPIChooser").append("<button style='width:100%' class='btn' onclick='onKPIchange(this, "+i+")'>"+KPIs[i].name+"<br><span class='label label-info'>"+KPIs[i].unit+"</span></button>");
	}
	$("#waiting").hide();
}

function onKPIchange(button, KPIindex){
	$("#waiting").show();
	$(button).button('loading');
	$.getScript('https://script.google.com/a/macros/essilor.fr/s/AKfycbw1O7KTwcAiJakyX1SO9ndUwlOf13tKgVUadHtcTNA__NmVKKQn/exec?KPI='+KPIindex+'&prefix=drawChart', function() {
		$(button).button('reset').button('toggle');
	});
}

function drawChart(data){
	$("#waiting").hide();

	//parse dates
	for(var i in data)
		for(var j in data[i].values)
			data[i].values[j].x = new Date(data[i].values[j].x);

	//draw the chart
	var chart = nv.models.lineWithFocusChart();
	chart.xAxis
	.showMaxMin(false)
	.ticks(d3.time.months,1)
	.tickFormat(function(d) { return d3.time.format('%b %y')(new Date(d)) });
	chart.x2Axis
	.showMaxMin(false)
	.ticks(d3.time.months,6)
	.tickFormat(function(d) { return d3.time.format('%b %y')(new Date(d)) });
	chart.yAxis.showMaxMin(false)
	.axisLabel("KPI");
	chart.y2Axis.showMaxMin(false).ticks(0);
	d3.select('#mainChart svg')
	.datum(data)
	.transition().duration(1000)
	.call(chart);
	nv.utils.windowResize(chart.update);
}
</script>

<script type="text/javascript" src="https://script.google.com/a/macros/essilor.fr/s/AKfycbxJOQtLMUEgqWhGWEXal9u0aVtcYqEVzTCWW6W5B2wt5GnxE5tM/exec?q=getKPIs&prefix=updateKPIChooser"></script>	